<template>
  <div class="PlayFooter" :style="{'background-color':Styles.backgroundColor,color:Styles.color}">
    <div class="content">
      <div class="schedule">
        <div class="fasr-div">{{startTime|Playtime}}</div>
        <div class="nth-div" ref="progressBar"
             @touchstart="scheduleStart" @touchmove="scheduleMove"
             @touchend="scheduleEnd"
        >
          <p class="fasr-p"></p>
          <p class="last-p" :style="{ width: Progress + '%',backgroundColor:Styles.borderColor}"></p>
          <span class="schedule-span"
                :style="{ left: Progress + '%',transform:'scale('+scale+')',backgroundColor:Styles.mode===2?'#7f7f7f':'#fff'}"><i :style="{'background-color':Styles.backgroundColor}"></i></span>
        </div>
        <div class="last-div">{{endTime|Playtime}}</div>
      </div>
      <div class="Features">
        <div class="" @click="Click('VocabularyShow')">
          <i class="iconfont icon-cihui2"></i>
        </div>
        <div class="" @click="Click('HandoutShow')">
          <i class="iconfont icon-jiangyi"></i>
        </div>
        <div class="control" @click="isPlay" :style="{color:Styles.iconBgColor,backgroundColor:Styles.borderColor}">
          <!--<i class="iconfont icon-bofang-sanjiaoxing" v-if="ispay"></i>-->
          <i class="iconfont icon-zanting" v-if="ispay"></i>
          <i class="iconfont icon-bofang" v-else></i>
        </div>
        <div class="" @click="Click('SpeedShow')">
          <i class="iconfont icon-bofangsudu"></i>
        </div>
        <div class="" @click="Click('Modifyshow')">
          <i class="iconfont icon-gengduo1"></i>
        </div>
      </div>
    </div>
    <audio ref="audio" id="audio" :src="chapter_url" preload="auto" @timeupdate="state"></audio>
  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        startTime: 0,
        endTime: 0,
        scale: 1,
        speed: 28.6,
        Progress: 0,
        ispay: false
      }
    },
    props: ['chapter_url', 'Styles'],
    mounted: function () {
    },
    methods: {
      state: function (e) {
        let audio = e.target
        this.startTime = audio.currentTime
        this.endTime = audio.duration
        this.Progress = ((audio.currentTime / audio.duration) * 100)
        if (!audio.paused) {
          this.ispay = true
        } else {
          this.ispay = false
        }
        var Time = this.$Mate.Playtime(this.startTime)
        // this.position()
        this.lrBox(Time)
      },
      lrBox: function (Time) {
        this.$emit('lrBox', Time)
      },
      isPlay: function () {
        let audio = this.$refs.audio
        if (!audio.paused) {
          audio.pause()
          this.ispay = false
        } else {
          audio.play()
          this.ispay = true
        }
      },
      Click: function (str) {
        this.$emit(str)
      },
      Speed: function (obj) {
        let audio = this.$refs.audio
        audio.playbackRate = obj.Speed.toFixed(1)
        this.speed = obj.X
      },
      scheduleStart: function (e) {
        this.scale = 1.4
        this.$refs.audio.pause()
        let targetWidth = this.$refs.progressBar.offsetWidth
        this.$Mate.scheduleStart(e, this.Progress, targetWidth)
      },
      scheduleMove: function (e) {
        this.scale = 1.4
        this.Progress = this.$Mate.scheduleMove(e,)
      },
      scheduleEnd: function (e) {
        this.scale = 1
        let audio = this.$refs.audio
        audio.currentTime += this.$Mate.scheduleEnd(audio.duration)
        this.$refs.audio.play()
        // this.Plays()
      },
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
